<template>
  <div class="q-layout-padding q-gutter-y-md">
    <t-input filled v-model="inputModel" label="QInput 1" />
    <t-input autofocus filled v-model="inputModel" label="QInput 2" />
    <t-select
      filled
      v-model="selectModel"
      :options="options"
      use-input
      behavior="menu"
      label="QSelect 1 (menu)"
    />
    <t-select
      filled
      v-model="selectModel"
      :options="options"
      use-input
      behavior="dialog"
      label="QSelect 2 (dialog)"
    />

    <div>
      <t-separator spaced />
    </div>

    <t-input
      filled
      v-model="inputModel"
      label="QInput 3 (set ID)"
      :for="forInput"
    />
    <t-input filled v-model="forInput" label="ID for above QInput" />

    <div>
      <t-separator spaced />
    </div>

    <t-select
      filled
      v-model="selectModel"
      :options="options"
      use-input
      behavior="menu"
      label="QSelect 3 (menu) (set ID) (autofocus)"
      :for="`menu_${forSelect}`"
    />
    <t-select
      filled
      v-model="selectModel"
      :options="options"
      use-input
      behavior="dialog"
      label="QSelect 3 (dialog) (set ID)"
      :for="`dialog_${forSelect}`"
    />
    <t-input filled v-model="forSelect" label="ID for above QSelect" />

    <div>
      <t-separator spaced />
    </div>

    <t-btn label="Toggle" @click="show = !show" />
    <t-input filled v-if="show" v-model="inputModel" label="QInput 4" />
    <t-select
      filled
      v-if="show"
      v-model="selectModel"
      :options="options"
      use-input
      behavior="menu"
      label="QSelect 5 (menu)"
    />
    <t-select
      filled
      v-if="show"
      v-model="selectModel"
      :options="options"
      use-input
      behavior="dialog"
      label="QSelect 5 (dialog)"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,

        inputModel: '',
        selectModel: null,

        forInput: 'QInputId',
        forSelect: 'QSelectId',

        options: ['Option 1', 'Option 2', 'Option 3'],
      };
    },
  };
</script>
